import TauPage from '@/components/TauPage';
import TauActionPanel from '@/components/TauActionPanel';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { ENUMS, column, toSelectDataSource } from './stores/definitions';
import { toJS } from 'mobx';
import DrawerFooter from '@/components/DrawerFooter';
import { Button } from '@alifd/next';

const tableId = uniqueId('tauTable-');

function Merchant({ channel, onCancel, modal }) {
  const { merchantStore: store } = useStore();
  useEffect(() => { if (modal[1]?.startsWith?.('toClose')) handleCancel(); }, [modal]);

  useEffect(() => {
    (async () => {
      store.search = channel || {};
      await store.getPrice();
    })();
  }, []);

  // 获取列表数据
  const handleOnSearch = (params) => {
    const { ...searchArgs } = params.values;
    store.search = {
      ...channel || {},
      ...searchArgs,
    };
  };

  // 关闭modal
  const handleCancel = () => {
    onCancel?.();
  };

  return (
    <>
      <TauPage className="page-container">
        <TauActionPanel
          onSearch={handleOnSearch}
          searchItems={[
            {
              name: 'starLevel',
              type: 'select',
              props: {
                dataSource: toSelectDataSource(ENUMS.starLevel),
                placeholder: t`商户星级`,
              },
            },
            {
              name: 'state',
              type: 'select',
              props: {
                dataSource: toSelectDataSource(ENUMS.state),
                placeholder: t`启用状态`,
              },
            },
            {
              name: 'pricingScheme',
              type: 'select',
              props: {
                dataSource: store.price,
                placeholder: t`价格方案`,
              },
            },
          ]}
          keywordSearch={{
            // enabled: true,
            placeholder: t`请输入关键字搜搜`,
          }}
          className="action-panel"
        />
        <div className="content">
          <TauTable
            instanceId={tableId}
            primaryKey="id"
            tableLayout="fixed"
            currentPage={store.pg.page}
            pageSize={store.pg.size}
            total={store.total}
            sort={store.tableSort}
            onFetch={(pg) => { store.pg = pg; }}
            loading={store.loading}
            dataSource={toJS(store.data)}
            columns={[
              { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
              column('id', { }),
              column('name', {}),
              column('pricingScheme', { }),
              column('starLevel', { }),
              column('administrators.name', { }),
              column('state', { }),
            ]}
          />
        </div>
      </TauPage>
      <DrawerFooter>
        <Button style={{ marginLeft: 8 }} onClick={() => handleCancel()}>{t`取消`}</Button>
      </DrawerFooter>
    </>
  );
}

export default observer(Merchant);
